import {Form, useLoaderData} from "react-router-dom";
import {useSelector} from "react-redux";
import {useState} from "react";


export default function ArticleEdit() {
    const article = useLoaderData()
    const [title, setTitle] = useState(article.title || "")
    const [description, setDescription] = useState(article.description || "")
    const [body, setBody] = useState(article.body ||"")
    const [tag, setTag] = useState("")
    const [tags, setTags] = useState(article.tags || [])
    return (<div className="editor-page">
        <div className="container page">
            <div className="row">
                <div className="col-md-6 col-xs-12 offset-md-3">
                    <h1>编辑文章</h1>
                    <Form method="post">
                        <fieldset className="form-group">
                            <input
                                className="form-control form-control-lg"
                                type="text"
                                placeholder="文章标题"
                                name="title"
                                defaultValue={title}
                            />
                        </fieldset>
                        <fieldset className="form-group">
                            <input
                                className="form-control form-control-lg"
                                type="text"
                                placeholder="文章描述"
                                name="description"
                                defaultValue={description}
                            />
                        </fieldset>
                        <fieldset className="form-group">
                                <textarea
                                    className="form-control form-control-lg"
                                    style={{resize: "none"}}
                                    rows="8"
                                    placeholder="用Markdown格式编辑文章"
                                    name="body"
                                    defaultValue={body}
                                ></textarea>
                        </fieldset>
                        <fieldset className="form-group">
                            <input
                                className="form-control form-control-lg"
                                type="text"
                                placeholder="输入标签"
                                onChange={(e) => setTag(e.target.value)}
                                onKeyUp={(e) => {
                                    if (e.keyCode === 65) {
                                        setTags([...tags, tag]);
                                        setTag("")
                                    }
                                }}
                            />
                            {
                                tags.map(tag => {
                                    return (<span key={tag} className="tag-default tag-pill">
                                            <i className="fa fa-trash-o fa-lg" style={{cursor:"pointer"}} onClick={() => {
                                                const filterTags = tags.filter(ftag => {
                                                    return ftag != tag;
                                                })
                                                setTags(filterTags)
                                            }}></i>
                                        {" "}
                                        {tag}</span>)
                                })
                            }
                            <input type="hidden" value={tags} name="tags"/>
                        </fieldset>
                        <button className="btn btn-lg btn-primary pull-xs-right" type="submit">更新文章</button>
                    </Form>
                </div>
            </div>
        </div>
    </div>)
}